﻿@using SocketGateway.DTO;
@model WhiteBlackDto;

@section head{
    <style>
        .layui-input-block {
            margin-left: 0 !important;
        }

        .lbl-notice {
            color: lightgray;
        }

        .layui-panel {
            padding: 15px;
            margin-bottom: 10px;
        }
    </style>
}

<body class="pear-container">
    <form class="layui-form">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6 layui-col-sm6">
                <div class="layui-card">
                    <div class="layui-card-header">IP黑名单配置</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block">
                                <textarea name="black" id="black" placeholder="多个IP以|隔开" class="layui-textarea">@string.Join('|', Model.IpBlackList)</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6">
                <div class="layui-card">
                    <div class="layui-card-header">IP白名单配置</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block">
                                <textarea name="white" id="white" placeholder="多个IP以|隔开" class="layui-textarea">@string.Join('|', Model.IpWhiteList)</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-panel lbl-notice">
                <pre>多个IP以|隔开</pre>
                <pre>黑白名单IP配置，白名单优先级大于黑名单;格式：["ip地址"]</pre>
                <pre>白名单：若白名单不为空，则存在白名单内的IP可通行，否则拒绝(不再判断黑名单)</pre>
                <pre>黑名单：若黑名单不为空，则不存在黑名单内的IP可通行，否则拒绝</pre>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-primary layui-btn-radius layui-border-blue layui-btn-fluid" lay-submit lay-filter="save">保存</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(function () {
            var $ = layui.$;
            var form = layui.form;
            var layer = layui.layer;
            form.on('submit(save)', function (data) {
                var obj = { ipWhiteList: data.field.white.split('|'), ipBlackList: data.field.black.split('|') };
                $.ajax({
                    type: 'post',
                    url: '/api/data/save.whiteblack',
                    data: JSON.stringify(obj),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (rep) {
                        if (rep.code == 0) {
                            layer.msg('保存成功');
                            form.render();
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>
